<template>
    <view class="page">
		<view class="center">
			<view class="title">
				欢迎回来
			</view>
			<view class="tip">
				选择您感兴趣的类别
			</view>
		</view>
		<checkbox-group>
        <view class="container">
             <view class="item" v-for="(e,i) in list" :key="i">
             	
             	<view class="img">
             		<img class="img" :src="e.img" alt="">
             	</view>
				<view class="check">
					 <checkbox :value="i" />
				</view>
             	<view class="text center">
             		{{ e.name }}
             	</view>
             </view>  
        </view>
		</checkbox-group>
		<u-button :hairline="false" type="primary" shape="circle" text="确定" color="#FF2A43" @click="send()"></u-button>
        
    </view>
</template>
 
<script>
	var res;
    export default {
        data() {
            return {
                
            }
        },
		created() {
			this.getData()
		},
		methods:{
			async getData(data){
			         res = await this.service.list({});
			         this.list = res.data;
					 console.log(this.list);
			    },
			async send(){
				 uni.switchTab({ url:'/pages/home/home'})
			}
		}
    }
</script>
 
<style lang="scss" scoped>
  .page{
	  padding: 0 15px; 
	  .title{
	  	font-size: 48rpx;
	  	font-family: PingFangSC-Medium-, PingFangSC-Medium;
	  	font-weight: normal;
	  	color: #232832;
	  	line-height: 56rpx;
		margin-top: 50px;
	  }
	  .tip{
	  	font-size: 30rpx;
	  	font-family: PingFangSC-Regular-, PingFangSC-Regular;
	  	font-weight: normal;
	  	color: #787B86;
	  	line-height: 36rpx;
	  	margin-top: 20px;
	  }
	  .container{
		  margin-top: 40px;
		  height: 65vh;
		  overflow: auto;
	  }
	  .item{
		  margin: 5px;
		  position: relative;
	  }
	  .check{
		  position: absolute;
		  top: 5px;
		  right: 3px;
	  }
	  .img{
		  width: 100px;
		  height: 100px;
		  border-radius: 10px;
	  }
	  .text{
		  font-size: 30rpx;
		  font-family: PingFangSC-Regular-, PingFangSC-Regular;
		  font-weight: normal;
		  color: #232832;
		  margin-top: 20px;
	  }
  }
	
     
</style>

